<html>
<title>实例属性</title>

<head>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            let vm1 = new Vue({
                el: '.container',
                data: {
                    msg: "这是普通属性数据",
                },
                //vue实例中自定义的属性和方法
                name:"tom",
                age:18,
                show:function(){
                    console.log("show");
                }
            });
            //1、vm1.$el 获取vue实例关联的元素
            console.log(vm1.$el);
            vm1.$el.style.color="red";
            //2、vm1.$data 获取数据对象data
            console.log(vm1.$data.msg)
            //3、vm1.options 获取自定义的属性
            console.log(vm1.$options.name);
            console.log(vm1.$options.age);
            vm1.$options.show();
            //4、vm1.$ref获取使用ref标注的dom对象
            console.log(vm1.$refs.hello);
            vm1.$refs.hello.style.color="blue";
        }
        
    </script>
</head>

<body>
    <div class="container">
        <h3>Hello World</h3>
        <h4 ref="hello">Hello Vue</h4>
    </div>
</body>

</html>